import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import AntDesign from 'react-native-vector-icons/AntDesign';
import Entypo from 'react-native-vector-icons/Entypo';
import Colors from '../../util/Colors';
import Toast from 'react-native-easy-toast';

export default class MusicHeader extends Component {

  constructor(props) {
    super(props);
    this.state = {};
    this.key = this.props.song.id.toString();

  }

  render() {
    let song = this.props.song;
    return (
      <View style={[styles.item, this.props.style]}>
        <AntDesign
          name={'arrowleft'}
          size={24}
          style={styles.icon}
          color={'white'}
          onPress={this.props.onPress}
        />
        <View style={styles.layoutText}>
          <Text style={styles.itemTitle} numberOfLines={1}>
            {song.name}
          </Text>
          <Text style={styles.itemSubTitle} numberOfLines={1}>
            {song.info || song.singer}
          </Text>
        </View>


        <Toast
          ref={toast => {
            this.toast = toast;
          }}
          position="center"
          style={{ backgroundColor: Colors.colorPrimary }}
        />
      </View>
    );
  }

  _addFav() {


    this.toast.show('已添加收藏');

  }


  _removeFav() {

    this.toast.show('取消收藏');

  }

}


const styles = StyleSheet.create({
  item: {
    height: 60,
    flexDirection: 'row',
    justifyContent: 'center', // 子元素沿主轴的对齐方式
    alignItems: 'center',
    marginHorizontal: 10,
    marginVertical: 5,
  },
  icon: {
    padding: 12,
  },
  layoutText: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center', // 子元素沿主轴的对齐方式
    marginLeft: 10,
    overflow: 'hidden'
  },
  itemTitle: {
    fontSize: 15,
    color: '#ffffff'
  },
  itemSubTitle: {
    fontSize: 13,
    color: '#dddddddd',
    marginTop: 2,
  },
});
